<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      书　名：<input type="text" /><br />
      作　者：<input type="text" /><br />
      出版社：<input type="text" /><br />
      <button>添加</button>
    </form>
    <hr />

    <table border="1" width="500" rules="all" cellpadding="5">
      <thead>
        <tr>
          <th>ID</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <p style="display: none">完命加载中...</p>
    <script src="./axios.js"></script>
    <script>
      // 测试，发送一些请求试试
      // axios({
      //   method: 'GET',
      //   url: 'http://www.liulongbin.top:3006/api/getbooks'
      // }).then(result => {
      //   console.log(result)
      // })

      // 测试，发送一个带 params 的请求
      // axios({
      //   url: 'http://www.liulongbin.top:3006/api/getbooks',
      //   method: 'GET',
      //   params: { id: 1 }
      // }).then(result => {
      //   console.log(result)
      // })

      // 测试，发送一个带 data 的请求
      // axios({
      //   method: 'POST',
      //   url: 'http://www.liulongbin.top:3006/api/addbook',
      //   data: {
      //     bookname: '完美世界',
      //     author: '辰东',
      //     publisher: '仙侠出版社'
      //   }
      // }).then(result => {
      //   console.log(result)
      // })
    </script>

    <script>
      // 短路运算 ||
      // 解构赋值
      // map方法
      // 0. ------------------------ 配置请求根路径 -------------------------------
      // 参考地址：https://www.axios-http.cn/docs/config_defaults
      axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

      // 添加请求拦截器
      axios.interceptors.request.use(
        function (config) {
          // 在发送请求之前做些什么 ----- 请求发送之前，你要做什么，就写到这里
          // config 是请求的配置对象，你可以修改这个对象，也可以向里面新增配置
          // config = { method: '', url: '', params: {}, data: {}, ....... }
          console.log('进入了请求拦截器')
          document.querySelector('p').style.display = 'block'
          return config
        },
        function (error) {
          // 对请求错误做些什么 ------ 用不上
          return Promise.reject(error)
        }
      )

      // 添加响应拦截器
      axios.interceptors.response.use(
        function (response) {
          // 2xx 范围内的状态码都会触发该函数。
          // 对响应数据做点什么
          // response 相当于 result，response.data 就是服务器返回的结果
          console.log('进入了响应拦截器-1')
          document.querySelector('p').style.display = 'none'
          return response
        },
        function (error) {
          // 超出 2xx 范围的状态码都会触发该函数。
          // 对响应错误做点什么
          // error.response 相当于result，error.response.data 就是服务器返回的结果
          console.log('进入了响应拦截器-2')
          document.querySelector('p').style.display = 'none'
          return Promise.reject(error)
        }
      )

      // 1. ------------------------ 获取图书，渲染到表格 ---------------------------
      function renderBooks() {
        axios({
          method: 'GET',
          url: '/api/getbooks'
        }).then(({ data: res }) => {
          // console.log(res)
          document.querySelector('tbody').innerHTML = res.data
            .map(item => {
              return `<tr>
      <td>${item.id}</td>
      <td>${item.bookname}</td>
      <td>${item.author}</td>
      <td>${item.publisher}</td>
      <td>
        <button data-id="${item.id}">删除</button>
      </td>
    </tr>`
            })
            .join('')
        })
      }
      renderBooks()
      // 2. ------------------------ 添加图书 -------------------------------------
      document.querySelector('button').addEventListener('click', function (e) {
        e.preventDefault() // 阻止默认行为
        let bookname = document.querySelectorAll('input')[0].value
        let author = document.querySelectorAll('input')[1].value
        let publisher = document.querySelectorAll('input')[2].value
        axios({
          method: 'POST',
          url: '/api/addbook',
          data: { bookname, author, publisher }
        }).then(({ data: res }) => {
          console.log(res)
          renderBooks()
        })
      })
      // 3. ------------------------ 删除图书 -------------------------------------
      document.querySelector('tbody').addEventListener('click', function (e) {
        if (e.target.tagName === 'BUTTON') {
          let id = e.target.dataset.id
          // console.log('你点击了删除', id)
          axios({
            method: 'DELETE',
            url: '/api/delbook',
            params: { id }
          }).then(({ data: res }) => {
            renderBooks()
          })
        }
      })
    </script>
  </body>
</html>
